<route lang="json5" type="page">
{
  layout: "default",
  style: {
    navigationStyle: "custom",
    navigationBarTextStyle: "black",
  },
}
</route>

<template>
  <view class="">
    <cu-navbar title="健康信息"> </cu-navbar>
    <view class="wrap" :style="{ '--bot': bottom + 60 + 'px' }">
      <!-- 基础信息 -->

      <uv-checkbox-group v-model="checkboxValue">
        <uv-checkbox
          :customStyle="{ marginBottom: '8px' }"
          v-for="(item, index) in checkboxList"
          :key="index"
          :label="item.name"
          :name="item.name"
        ></uv-checkbox>
      </uv-checkbox-group>
      <view class="tit">基础信息</view>
      <cu-card padding="0 31rpx">
        <uv-cell title="姓名" :cellStyle="{ padding: '20rpx 0' }">
          <template v-slot:value>
            <text>{{ userInfo.name }}</text>
          </template>
        </uv-cell>
        <uv-cell title="性别" :cellStyle="{ padding: '20rpx 0' }">
          <template v-slot:value>
            <radio-group @change="sexChange">
              <label class="radio"
                ><radio
                  value="0"
                  color="#00754A"
                  :checked="userInfo.sex == 0"
                  style="transform: scale(0.8)"
                />男</label
              >
              <label class="radio"
                ><radio
                  value="1"
                  color="#00754A"
                  :checked="userInfo.sex == 1"
                  style="transform: scale(0.8)"
                />女</label
              >
            </radio-group>
          </template>
        </uv-cell>
        <uv-cell title="年龄" :isLink="true" :cellStyle="{ padding: '20rpx 0' }">
          <template v-slot:value>
            <input
              :style="{ textAlign: 'right', foneSize: '31rpx' }"
              type="number"
              :maxlength="3"
              v-model="userInfo.age"
              placeholder="请输入内容"
              placeholder-class="input-placeholder"
            />
          </template>
        </uv-cell>
        <uv-cell title="身高(cm)" :isLink="true" :cellStyle="{ padding: '20rpx 0' }">
          <template v-slot:value>
            <input
              :style="{ textAlign: 'right', foneSize: '31rpx' }"
              type="number"
              :maxlength="3"
              v-model="userInfo.height"
              placeholder="请输入内容"
              placeholder-class="input-placeholder"
            />
          </template>
        </uv-cell>
        <uv-cell title="腰围(cm)" :isLink="true" :cellStyle="{ padding: '20rpx 0' }">
          <template v-slot:value>
            <input
              :style="{ textAlign: 'right', foneSize: '31rpx' }"
              type="number"
              :maxlength="3"
              v-model="userInfo.waistline"
              placeholder="请输入内容"
              placeholder-class="input-placeholder"
            />
          </template>
        </uv-cell>
        <uv-cell title="体重(kg)" :isLink="true" :cellStyle="{ padding: '20rpx 0' }">
          <template v-slot:value>
            <input
              :style="{ textAlign: 'right', foneSize: '31rpx' }"
              type="number"
              :maxlength="3"
              v-model="userInfo.weight"
              placeholder="请输入内容"
              placeholder-class="input-placeholder"
            />
          </template>
        </uv-cell>
        <uv-cell
          :cellStyle="{ padding: '20rpx 0' }"
          title="劳动强度"
          :value="userInfo.weight"
          :isLink="true"
          :border="false"
          @click="showAction"
        ></uv-cell>
      </cu-card>
      <view class="tit">基础疾病 <text>(可多选)</text></view>
      <!-- 基础疾病 -->
      <cu-card>
        <uv-checkbox-group v-model="diseaseVal" labelColor="#969799">
          <uv-checkbox
            activeColor="#00754A"
            :customStyle="{ marginBottom: '30rpx', minWidth: '33%' }"
            v-for="(item, index) in diseaseInfo"
            :key="index"
            :label="item.name"
            :name="item.name"
          ></uv-checkbox>
        </uv-checkbox-group>
      </cu-card>

      <!-- 未维护信息 -->
      <!-- <view class="tit">体检信息</view>
      <cu-card padding="0 31rpx">
        <uv-cell
          title="舒张压(毫米汞柱)"
          :cellStyle="{ padding: '20rpx 0' }"
          :isLink="true"
        >
          <template v-slot:value>
            <uv-input
              placeholder="请输入内容"
              maxlength="5"
              inputAlign="right"
              border="none"
              type="number"
              v-model="value"
              @change="change"
            ></uv-input>
          </template>
        </uv-cell>
        <uv-cell
          title="收缩压(毫米汞柱)"
          :isLink="true"
          :cellStyle="{ padding: '20rpx 0' }"
        >
          <template v-slot:value>
            <uv-input
              placeholder="请输入内容"
              inputAlign="right"
              maxlength="5"
              border="none"
              type="number"
              v-model="value"
              @change="change"
            ></uv-input>
          </template>
        </uv-cell>
        <uv-cell
          title="空腹血糖(毫摩尔/升)"
          :isLink="true"
          :cellStyle="{ padding: '20rpx 0' }"
        >
          <template v-slot:value>
            <uv-input
              placeholder="请输入内容"
              inputAlign="right"
              maxlength="5"
              border="none"
              type="number"
              v-model="value"
              @change="change"
            ></uv-input>
          </template>
        </uv-cell>
        <uv-cell
          title="甘油三酯(毫摩尔/升)"
          :isLink="true"
          :cellStyle="{ padding: '20rpx 0' }"
        >
          <template v-slot:value>
            <uv-input
              placeholder="请输入内容"
              inputAlign="right"
              maxlength="5"
              border="none"
              type="number"
              v-model="value"
              @change="change"
            ></uv-input>
          </template>
        </uv-cell>
        <uv-cell
          title="空腹血糖(毫摩尔/升)"
          :isLink="true"
          :cellStyle="{ padding: '20rpx 0' }"
        >
          <template v-slot:value>
            <uv-input
              placeholder="请输入内容"
              inputAlign="right"
              maxlength="5"
              border="none"
              type="number"
              v-model="value"
              @change="change"
            ></uv-input>
          </template>
        </uv-cell>
        <uv-cell
          title="总胆固醇(毫摩尔/升)"
          :isLink="true"
          :cellStyle="{ padding: '20rpx 0' }"
        >
          <template v-slot:value>
            <uv-input
              placeholder="请输入内容"
              inputAlign="right"
              maxlength="5"
              border="none"
              type="number"
              v-model="value"
              @change="change"
            ></uv-input>
          </template>
        </uv-cell>
        <uv-cell
          title="低密度胆固醇(毫摩尔/升)"
          :isLink="true"
          :cellStyle="{ padding: '20rpx 0', fontSize: '31rpx' }"
        >
          <template v-slot:value>
            <uv-input
              placeholder="请输入内容"
              inputAlign="right"
              maxlength="5"
              border="none"
              type="number"
              v-model="value"
              @change="change"
            ></uv-input>
          </template>
        </uv-cell>
        <uv-cell
          title="血尿酸(毫摩尔/升)"
          :isLink="true"
          :border="false"
          :cellStyle="{ padding: '20rpx 0' }"
        >
          <template v-slot:value>
            <uv-input
              placeholder="请输入内容"
              inputAlign="right"
              maxlength="5"
              border="none"
              type="number"
              v-model="value"
              @change="change"
            ></uv-input>
          </template>
        </uv-cell>
      </cu-card> -->
    </view>
    <view class="bottom" :style="{ '--bot': bottom + 8 + 'px' }">
      <view class="btnBox" @click="onSave">
        <uv-button shape="circle" color="#00754A" :disabled="false">
          <span style="font-size: 31rpx"> 保存 </span>
        </uv-button>
      </view>
    </view>

    <uv-picker
      ref="selectRef"
      color="#000000"
      activeColor="#00754A"
      confirmColor="#00754A"
      :columns="[labourList]"
      keyName="name"
      title="劳动强度"
      round="15rpx"
      @confirm="optionsSelect"
    ></uv-picker>
  </view>
</template>

<script lang="ts" setup>
//
import {
  reqUserDetail,
  reqLabourStrength,
  reqDiseasesInfo,
  saveUserInfo,
} from "@/service/business/login";
import { useUserStore } from "@/store";
const userStore = useUserStore();

const bottom = ref(userStore.pinia_SafeVal.bottom);
const { userId } = userStore.userInfo.user;


// 切换性别
const sexChange = (val) => {
  console.log(val);
  userInfo.value.sex = val.detail.value;
};

// 选择劳动强度
const selectRef = ref(null);
const showAction = (idx) => {
  selectRef.value.open();
  selectRef.value.setIndexs([0], true);
};

const optionsSelect = (e) => {};

// 保存信息
const onSave = () => {  
  saveUserInfo({...userInfo.value,illness:toRaw(diseaseVal.value)}).then(res=>{
    if(res.retCode == 2000){
      uni.showToast({
        title: '保存成功',    
        icon:'none'   ,
        success:()=>{
          uni.navigateBack({
            delta: 1
          });

        }
      });

    }
  })
};

// 体检信息
const examineInfo = ref({});

// 用户信息
const userInfo = ref();
// 劳动强度
const labourList = ref([]);
// 疾病信息
const diseaseInfo = ref();
const diseaseVal = ref();
onMounted(() => {
  reqUserDetail({ userId }).then((res) => {
    if (res.retCode == 2000) {
      userInfo.value = res.data;
      diseaseVal.value =JSON.parse(res.data.illness) || []
    }
  });

  reqLabourStrength().then((res) => {
    if (res.retCode == 2000) {
      labourList.value = res.data.map((el) => {
        el.name = el.strength;
        return el;
      });

    }
  });
  reqDiseasesInfo().then((res) => {
    if (res.retCode == 2000) {
      diseaseInfo.value = res.data;
    }
  });
});
</script>

<style lang="scss" scoped>
//
.radio {
  padding: 0 24rpx;
  transform: scale(0.7);
}
.wrap {
  padding: 24rpx;
  box-sizing: border-box;
  margin-bottom: var(--bot);

  .tit {
    font-weight: 400;
    font-size: 31rpx;
    color: #323233;
    line-height: 46rpx;
    margin: 15rpx 0;
    text {
      color: #969799;
    }
  }
}

.bottom {
  width: 100%;
  background: rgba(212, 233, 226, 0.6);
  border-radius: 23rpx 23rpx 0rpx 0rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  .btnBox {
    width: 100%;
    background: #fff;
    padding: 15rpx 31rpx var(--bot) 31rpx;
    border-radius: 23rpx 23rpx 0rpx 0rpx;
    box-sizing: border-box;
  }
}
</style>
